<script setup lang="ts">
import { EvaluateDoc } from "@/types/chitchatTypes/chitchatTypes.ts";

defineProps<{
   evaluateDoc?: EvaluateDoc
}>();
</script>

<template>
   <div class="evaluate-card" v-if="evaluateDoc">
      <p class="title">医生服务评价</p>
      <p class="desc">我们会更加努力提升服务质量</p>
      <van-rate :modelValue="3" size="7vw" gutter="3vw" color="#FADB14" void-icon="star" void-color="rgba(0,0,0,0.04)" />
   </div>
   <div class="evaluate-card" v-else>
      <p class="title">感谢您的评价</p>
      <p class="desc">本次在线问诊服务您还满意吗？</p>
      <van-rate size="7vw" gutter="3vw" color="#FADB14" void-icon="star" void-color="rgba(0,0,0,0.04)" />
      <van-field type="textarea" maxlength="150" show-word-limit rows="3" placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题"></van-field>
      <div class="footer">
         <van-checkbox>匿名评价</van-checkbox>
         <van-button type="primary" size="small" round> 提交评价</van-button>
      </div>
   </div>
</template>

<style scoped lang="scss">
.evaluate-card {
   width: 100%;
   background-color: #fff;
   border-radius: 8px;
   overflow: hidden;
   text-align: center;
   padding: 15px;

   .title {
      font-size: 15px;
      margin-bottom: 5px;
   }

   .desc {
      font-size: 12px;
      margin-bottom: 15px;
      color: var(--cp-tip);
   }

   .van-field {
      background-color: var(--cp-bg);
      margin: 15px 0;
      border-radius: 8px;
   }

   .footer {

      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;

      :deep {
         .van-checkbox {
            .van-icon {
               font-size: 12px;
            }

            &__label {
               font-size: 12px;
               color: var(--cp-tip);
            }

            height: 16px;
         }

         .van-button {
            padding: 0 16px;

            &.disabled {
               opacity: 1;
               background: #fafafa;
               color: #d9dbde;
               border: #fafafa;
            }
         }
      }
   }
}
</style>
